<template>
	<view>
		<swiper class="carousel"
		autoplay="true"
		circular="true"
		interval="5000"
		duration="500" style="height:400rpx; ">
			<swiper-item v-for="(vo , index) in slide" class="carousel-item">
				<navigator :url="vo.url" hover-class="none">
					<image :src="vo.image" mode="widthFix" />
				</navigator>
			</swiper-item>
		</swiper>
		<view class="nav-box">
			<view class="nav-item" style="background-color: #2e8bf0;" @click="warehouse">
				<image src="/static/icon-2.png" mode="aspectFit"></image>
				<text>防伪认证</text>
			</view>
			<!-- <view class="nav-item" style="background-color: #5756d7;" @click="verification">
				<image src="/static/icon-1.png" mode="aspectFit"></image>
				<text>货品验证</text>
			</view> -->
		</view>
		<view class="user-box">
			<image :src="user.avatar"></image>
			<view class="userinfo">
				<text class="user-nickname">{{user.user_nickname}}</text>
				<text class="user-mobile">{{user.mobile}}</text>
			</view>
		</view>
	</view>
</template>
<style lang="scss">
	.user-box{
		display: flex;
		flex-direction: row;
		margin: 18rpx;
		background-color: #FFFFFF;
		padding:24rpx;
		border-radius: 10rpx;
		image{
			width: 100rpx; height:100rpx; border-radius: 50%;
		}
		.userinfo{
			display: flex;
			flex-direction: column;
			margin-left: 24rpx;
			justify-content: center;
			.user-nickname{
				font-size:32rpx; color:#000000;
			}
			.user-mobile{
				font-size: 24rpx;
				margin-top: 24rpx;
				color: #666666;
			}
		}
	}
	.nav-box{
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-top:24rpx;
		.nav-item{
			margin: 0 12rpx;
			display: flex;
			flex-direction: row;
			height: 160rpx;
			width: 717rpx;
			border-radius: 10rpx;
			justify-content: center;
			align-items: center;
			image{
				width: 82rpx;
				height: 82rpx;
				border-radius: 50%;
				box-sizing: border-box;
				background-color: #FFFFFF;
				padding: 16rpx;
			}
			text{
				color: #FFFFFF; margin-left: 24rpx;
			}
		}
	}
</style>
<script>
	export default {
		data() {
			return {
				slide:[],
				user:{}
			}
		},
		onLoad() {
			this.$u.api.getSlide({id:1}).then(slideRes => {
				this.slide = slideRes.data[0].items;
			});
		},
		computed:{
			avatar(){
				return uni.getStorageSync('user')?uni.getStorageSync('user').avatar:''
			},
			user_nickname(){
				return uni.getStorageSync('user')?uni.getStorageSync('user').user_nickname:''
			},
			mobile(){
				return uni.getStorageSync('user')?uni.getStorageSync('user').mobile:''
			}
		},
		onShow(){
			// this.$u.api.getUserInfo().then(res => {
			// 	this.user = res.data;
			// });
			let user = uni.getStorageSync('user');
			this.user = {...user}
		},
		methods: {
			warehouse(e){
				uni.setStorageSync('mall_type',1);
				const islogin = uni.getStorageSync('login')
				if(islogin){
					uni.navigateTo({
						url:"/pages/mall/warehouse-list?type=1"
					})
				}else{
					this.$u.api.getUserInfo().then(res => {
						uni.navigateTo({
							url:"/pages/mall/warehouse-list?type=1"
						})
					});
				}
			},
			verification(e){
				uni.setStorageSync('mall_type',2);
				const islogin = uni.getStorageSync('login')
				if(islogin){
					uni.navigateTo({
						url:"/pages/mall/warehouse-list?type=2"
					})
				}else{
					this.$u.api.getUserInfo().then(res => {
						uni.navigateTo({
							url:"/pages/mall/warehouse-list?type=2"
						})
					});
				}
				
			}
		}
	}
</script>